<template>
  <div class="container">
    <div class="left">
      <div v-for="route in routes" :key="route.name">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </div>
    </div>
    <div class="right">
      <!-- <router-view /> -->
      <div id="container-vue2"></div>
      <div id="container-vue3"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { routes } from "./router";
defineOptions({
  name: "App",
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.left {
  width: 150px;
  height: 100%;
}
.right {
  flex: 1;
  height: 100%;
}
</style>
